<template>
    <div class="background" id="register-all">
        <div class="leftbox">
            <div class="left-content">
                <h1>暑假培训项目</h1>
                <p>快速便捷的注册平台</p>
            </div>
        </div>
        <div class="rightbox">
            <div class="rightbox-outer">
                <div class ="errormassage">{{ errormassage }}</div>
                <div class="rightbox-header">注册</div>
                <div class="input-group">
                    <input type="email" class="userinput" placeholder="请输入用户名、邮箱、手机号" v-model = "username">
                </div>
                <div class="input-group">
                    <input type="text" class="authcode" placeholder="请输入验证码" v-model = "authcode">
                    <div class="auth-button" @click="getauthcode">点击获取</div>
                </div>
                <div class="input-group">
                    <input type="password" class="passwordinput" placeholder="请输入密码" v-model = "password">
                </div>
                <div class="input-group">
                    <input type="password" class="passwordinput" placeholder="请再输入密码" v-model = "confirmPassword">
                </div>
                <button class="register-button" @click = "handleRegister">注册</button>
                <div class="login-link">
                    <div @click = "register" class = "login-link">已有账号？立即登录</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { ref } from 'vue'

const username = ref('')
const password = ref('')
const authcode = ref('')
const confirmPassword = ref('')
const errormassage = ref('')
const router = useRouter()

const handleRegister = () => {
    if (username.value === '') {
        errormassage.value = '请输入邮箱！'
        return
    }
    if (authcode.value === ''){
        errormassage.value = '请输入验证码！'
        return
    }
    if (password.value === '' ){
        errormassage.value = '请输入密码！'
        return
    }
    if (confirmPassword.value === '' ){
        errormassage.value = '请再次输入密码！'
        return
    }
    if (password.value != confirmPassword.value) {
        errormassage.value = '两次输入的密码不一致！'
        return
    }
    router.push('/')
}

const getauthcode = () => {
    authcode.value = Math.floor(Math.random() * 9000) + 1000
}

const register = () => {
    router.push('/')
}
</script>

<style scoped>
.background {
  display: flex;
  flex-direction: row;
  min-height: 100vh;
  margin: 0;
}

/*渐变色背景*/
#register-all {
  position: absolute;/*绝对定位*/
  height: 100%;
  width: 100%;
  top: 0;/*距离父元素的顶部和左边为0px*/
  left: 0;
  background-image: linear-gradient(90deg, cyan, purple); /*设置元素的背景为一个从左到右（90度）的线性渐变，颜色从青色过度到紫色。*/ 
  background-size: 400%; /*设置背景图像的大小为400%的宽度*/
  animation: myanimation 10s infinite; /*设置动画名称为myanimation，持续时间为10秒，无限循环*/
}

/*动画效果*/
@keyframes myanimation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.leftbox {
  width: 52%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.left-content {
  text-align: center;
  color: white;
  padding: 20px;
  z-index: 1;
}

.left-content h1 {
  font-size: 48px;
  margin-bottom: 20px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

.left-content p {
  font-size: 20px;
  line-height: 1.6;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
}

.rightbox {
  position: absolute;
  top: 0;
  right: 0;
  background-color: #fff;
  width: 45%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.rightbox-outer {
  background-color: #fff;
  width: 400px;
  padding: 40px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.rightbox-header {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 40px;
}

.input-group {
  width: 100%;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.userinput,
.passwordinput,
.authcode {
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 16px;
  box-sizing: border-box;
}

.userinput,
.passwordinput {
  width: 100%;
}

.authcode {
  width: 70%;
}

.userinput:focus,
.passwordinput:focus,
.authcode:focus {
  outline: none;
  border-color: #3093db;
  box-shadow: 0 0 5px rgba(48, 147, 219, 0.5);
}

.auth-button {
  width: 30%;
  padding: 12px;
  background-color: #3093db;
  color: #fff;
  border: none;
  border-radius: 5px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s;
  text-align: center;
}

.auth-button:hover {
  background-color: #207abd;
}

.register-button {
  width: 100%;
  padding: 12px;
  background-color: #3093db;
  color: #fff;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.register-button:hover {
  background-color: #207abd;
}

.login-link {
  cursor: pointer;
  margin-top: 20px;
  font-size: 14px;
  color: #3093db;
  text-decoration: none;
}

.login-link :hover {
  text-decoration: underline;
}

.errormassage {
  color: red;
  margin-bottom: 20px;
  font-size: 16px;
}
</style>